{%extends "base.html"%}
{%block title%}
SAM Drawer
{%endblock%}
{%block body%}
<script>
    var vue;
    $(this).ready(function () {
        vue = new Vue({
            delimiters: ['{[', ']}'],
            el: "#main",
            data: {
                error: false,
                error_text: "",
                str: "",
                showing: false,
                loading: false,
                svg_content: ""
            },
            methods: {
                submit: function () {
                    $("svg-content").css({ "height": "100px" });
                    this.error = false
                    this.showing = true;
                    this.loading = true;
                    $.ajax({
                        url: "/draw",
                        method: "POST",
                        async: true,
                        data: {
                            string: vue.str
                        },
                        success: function (result) {
                            result = JSON.parse(result)
                            console.log(result);
                            vue.loading = false;
                            if (result.code != 0) {
                                vue.error = true;
                                vue.error_text = result.message;
                                return;
                            }
                            vue.svg_content = result.data;
                        }
                    });
                }
            }
        });
    });
</script>
<div style="top: 10%">
    <div class="ui left aligned container" style="width: 100%" id="main">
        <div class="ui header">
            <h1>SAM Drawer</h1>
        </div>
        <div class="ui error message" v-if="error">
            <div class="ui header">
                错误
            </div>
            <p>{[error_text]}</p>
        </div>
        <div class="ui segment stacked">
            <div class="ui inverted active dimmer" v-if="loading">
                <div class="ui text loader">
                    正在加载..
                </div>
            </div>
            <div class="ui form" id="main-form">
                <div class="field">
                    <label>请输入字符串:</label>
                    <input type="text" id="string" v-model="str" v-on:keyup.enter="submit">
                </div>
                <p>如果要绘制广义SAM,请使用|分隔字符串</p>
                <div class="ui submit button" id="submit-button" v-on:click="submit">提交</div>
            </div>
        </div>
        <div v-if="showing" class="ui segment stacked">
            <div class="ui inverted active dimmer" v-if="loading">
                <div class="ui text loader">
                    正在加载..
                </div>
            </div>
            <div id="svg-content" class="ui center aligned container" style="min-height: 100px" v-html="svg_content">

            </div>
        </div>
    </div>
</div>
{%endblock%}